<template>
	<view class="content">
		<view class="top">
			<view class="email" @click="fs">
				<uni-icons type="email" size="25" color="white"></uni-icons>
			</view>
			<view class="close" @click="logout">
				<uni-icons type="closeempty" size="20" color="white"></uni-icons>
			</view>
			<view class="userinfo" @click="gouserinfo">

				<image :src="userimage || defaultPic" mode="scaleToFill"></image>

				<view class="info">
					<text>{{userjieshao.name}}</text>
					<text>{{userinfo.account}}</text>

				</view>
			</view>
			<view class="back">

			</view>
		</view>
		<view class="big">
			<view class="bottom">
				<view class="text">
					<view><text>26</text>获赞</view>
					<view><text>65</text>朋友</view>
					<view><text>586</text>关注</view>
					<view><text>61</text>粉丝</view>

				</view>
				<view class="jieshao" @click="gouserinfo">
					<view class="one">
						<text>{{userjieshao.jianjie || jiejian}}</text>
						<!-- <uni-icons custom-prefix="iconfont" type="icon-w_shuxie" size="18"></uni-icons> -->
					</view>
					<view class="two">
						<text class="dizhi">澳大利亚</text>
						<text class="age">
							<text class="tianjian">+</text>添加年龄、学校等标签
						</text>
					</view>
				</view>
				<view class="box">
					<scroll-view scroll-x="true" class="scroll">
						<view class="scroll-box">
							<view class="scroll-box-box">
								<view class="icon">
									<uni-icons custom-prefix="iconfont" type="icon-gouwuche" size="20"></uni-icons>
								</view>
								<view class="wenzi">
									<view class="bold">抖音商城</view>
									<view>美好生活触手可得</view>
								</view>
							</view>
						</view>
						<view class="scroll-box">
							<view class="scroll-box-box">
								<view class="icon">
									<uni-icons custom-prefix="iconfont" type="icon-yinle" size="20"></uni-icons>
								</view>
								<view class="wenzi">
									<view class="bold">我的音乐</view>
									<view>已收藏7首</view>
								</view>
							</view>
						</view>
						<view class="scroll-box">
							<view class="scroll-box-box">
								<view class="icon">
									<uni-icons custom-prefix="iconfont" type=".icon-xiaochengxu" size="20"></uni-icons>
								</view>
								<view class="wenzi">
									<view class="bold">我的小程序</view>
									<view>最近使用</view>
								</view>
							</view>
						</view>
						<view class="scroll-box">
							<view class="scroll-box-box">
								<view class="icon">
									<uni-icons custom-prefix="iconfont" type=".icon-airudiantubiaohuizhi-zhuanqu_youxi"
										size="20"></uni-icons>
								</view>
								<view class="wenzi-last">
									<view class="bold">我的游戏</view>
									<view>发现好游乐享时光</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="firend">
					<view @click="gouserinfo">
						编辑资料90%
					</view>
					<view>
						添加朋友
						<text>2</text>
					</view>
				</view>
			</view>
			<view class="video">
				<view class="video-title-box">
					<block v-for="(item,i) in videos" :key="i">
						<view :class="['video-title',i===active ? 'active' : '']" @click="qiehuan(i)">{{item.name}}
						</view>
					</block>
				</view>
				<view class="xihuan-shoucang" v-if="active === 3">
					<block v-for="(player, i) in reverseplay" :key="player.id" v-if="play.length !== 0">
						<view class="xihuan-shoucang-box">
							<view @click="myvideoxihuan(i)">
								<my-video :item="player"></my-video>
							</view>
						</view>
					</block>
					<view class="zhanwu" v-else>
						暂无喜欢
					</view>
				</view>
				<view class="xihuan-shoucang" v-if="active === 2">
					<block v-for="(player, i) in reverseshoucang " :key="player.id" v-if="shoucang.length !== 0">
						<view class="xihuan-shoucang-box">
							<view @click="myvideoshoucang(i)">
								<my-video :item="player"></my-video>
							</view>
						</view>
					</block>
					<view class="zhanwu" v-else>
						暂无收藏
					</view>
				</view>
				<view class="simi-zuoping" v-if="active === 1">
					暂无私密
				</view>
				<view class="simi-zuoping" v-if="active === 0">
					暂无作品
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "my-userinfo",
		data() {
			return {
				//切换作品
				videos: [{
					name: "作品"
				}, {
					name: "私密"
				}, {
					name: "收藏"
				}, {
					name: "喜欢"
				}],
				//默认选择taber
				active: 3,
				//用户选择头像
				imageStyles: {
					width: 70,
					height: 70,
					border: {
						width: 0.1,
						"style": "solid",
						"radius": "50%"
					},

				},
				//默认简介
				jiejian: '暂无简介，写点什么介绍下自己吧！',

				//默认头像图片
				defaultPic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202101%2F28%2F20210128075645_58931.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674027800&t=6dd8295f80f4953b6d2306c582380ae6'
			};

		},


		computed: {
			...mapState('m_user', ['userinfo', 'userimage', 'userjieshao']),
			...mapState('m_video', ['play', 'shoucang']),
			//倒序的方式存入我的喜欢
			reverseplay() {
				// 注意：由于数组是引用类型，所以不要直接基于原数组调用 reverse 方法，以免修改原数组中元素的顺序
				// 而是应该新建一个内存无关的数组，再进行 reverse 反转
				return [...this.play].reverse()
			},
			//倒序的方式存入我的收藏
			reverseshoucang() {
				return [...this.shoucang].reverse()
			}
		},
		methods: {
			...mapMutations('m_user', ['updataToken', 'updatauserinfo', 'updatauserjieshao', ]),
			//前往我的喜欢页面播放
			myvideoxihuan(i) {
				uni.navigateTo({
					url: `/subpkg/my-videoxihuan/my-videoxihuan?i=${i}`
				})
			},
			//前往我的收藏播放
			myvideoshoucang(i) {
				uni.navigateTo({
					url: `/subpkg/my-videoshoucang/my-videoshoucang?i=${i}`
				})

			},
			//退出登录
			logout() {
				//定义that接收this指向
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否退出登录',
					success: function(res) {
						if (res.confirm) {
							setTimeout(() => {
								that.updataToken('')
								that.updatauserinfo({})

								uni.$showMsg('已退出登录')
							}, 1000)
						} else if (res.cancel) {
							return uni.$showMsg('已取消')
						}
					}
				});
			},
			//切换tab
			qiehuan(i) {
				this.active = i
			},
			//发送邮箱
			fs() {
				uni.navigateTo({
					url: '/subpkg/fa-email/fa-email'
				})
			},
			//前往修改用户信息页面
			gouserinfo() {
				uni.navigateTo({
					url: '/subpkg/updatauserinfo/updatauserinfo'
				})
			}


		},

	}
</script>

<style lang="scss">
	.top {
		position: relative;
		width: 100%;
		height: 350rpx;
		background-size: cover;
		background-repeat: no-repeat;
		background-image: url(http://5b0988e595225.cdn.sohucs.com/images/20190711/cc73b84657f34e00978eb104030cd4d3.jpeg);

		.email {
			top: 3%;
			position: absolute;
			right: 15%;
			background-color: rgba(0, 0, 0, .3);
			border-radius: 50%;
			width: 70rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
		}

		.close {
			top: 3%;
			position: absolute;
			right: 3%;
			background-color: rgba(0, 0, 0, .3);
			border-radius: 50%;
			width: 70rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
		}

		.userinfo {
			z-index: 99;
			position: absolute;
			bottom: 15%;
			left: 3%;
			display: flex;
			align-items: center;

			image {
				width: 120rpx;
				height: 120rpx;
				border: 3px solid white;
				border-radius: 50%;
				margin-right: 10px;
			}

			.info {
				font-size: 14px;
				color: white;
				font-weight: 900;

				text {
					display: block;
					margin-bottom: 2px;
				}
			}
		}

		.back {
			position: absolute;
			width: 100%;

			background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(104, 56, 0, 1));
			height: 70px;
			bottom: 0;
			z-index: 1;
		}
	}

	.big {
		background-color: white;
	}

	.bottom {
		z-index: 4;
		top: -6px;
		position: relative;
		border-top-left-radius: 9px;
		border-top-right-radius: 9px;
		width: 100%;
		background-color: white;
		padding: 10px 0 0 10px;

		.text {
			padding-bottom: 5px;
			align-content: center;
			width: 70%;
			justify-content: space-between;
			display: flex;
			font-size: 13px;
			font-weight: 500;

			view {
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					margin-right: 2px;
					font-size: 15px;
					font-weight: bold;
				}
			}

		}

		.jieshao {
			padding: 5px 0;
			font-size: 12px;

			.one {
				font-size: 12px;
			}

			.two {
				margin-top: 5px;

				.dizhi {
					padding: 3px 8px;
					margin-right: 10px;
					background-color: rgba(0, 0, 0, 0.1);
					border-radius: 3px;
				}

				.age {
					padding: 3px 6px;
					margin-right: 10px;
					background-color: rgba(0, 0, 0, 0.1);
					border-radius: 3px;

					.tianjian {
						font-size: 15px;
						padding: 0;

					}
				}


			}
		}

		.box {

			.scroll {
				width: 100%;
				white-space: nowrap;

				padding: 10px 0;

				.scroll-box {
					display: inline-block;

					.scroll-box-box {
						align-items: center;
						display: flex;
						font-size: 12px;

						.icon {
							background-color: rgba(0, 0, 0, 0.1);
							height: 40px;
							width: 40px;
							text-align: center;
							line-height: 40px;
							margin-right: 8px;
							border-radius: 3px;

						}

						.wenzi {
							margin-right: 30px;
							font-size: 12px;

							.bold {
								font-size: 14px;
								font-weight: bold;
								margin-bottom: 4px;
							}
						}

						.wenzi-last {
							margin-right: 10px;

							.bold {

								font-size: 14px;
								font-weight: bold;
							}
						}
					}
				}
			}
		}

		.firend {
			padding: 10px 0 15px 0;
			width: 97%;
			display: flex;
			justify-content: space-between;

			view {
				padding: 8px 10px;
				width: 49%;
				background-color: rgba(0, 0, 0, 0.1);
				text-align: center;
				font-size: 14px;
				font-weight: bold;
				border-radius: 3px;

				text {
					font-weight: 500;
					display: inline-block;
					background-color: red;
					width: 15px;
					height: 15px;
					border-radius: 50%;
					color: white;
					line-height: 15px;
					font-size: 12px;
				}
			}
		}


	}

	.video {
		position: relative;

		.zhanwu {
			width: 100%;
			text-align: center;
			color: black;
			font-weight: bold;
			font-size: 18px;
			line-height: 400rpx;
		}

		.simi-zuoping {
			width: 100%;
			text-align: center;
			color: black;
			font-weight: bold;
			font-size: 18px;
			line-height: 400rpx;
		}

		.xihuan-shoucang {
			width: 100%;
			display: flex;
			flex-wrap: wrap;


			.xihuan-shoucang-box {
				position: relative;
				width: 33.3%;
				border: 0.2px solid white;
			}

		}

		.video-title-box {
			margin-top: -5px;
			background-color: white;
			padding-top: 5px;
			width: 100%;
			display: flex;
			justify-content: space-between;

			.video-title {
				padding-bottom: 7px;
				width: 25%;
				text-align: center;
				font-weight: 600;
				color: #a9a9ac;

				&.active {
					border-bottom: 2px solid black;
					position: relative;
					color: black;

					&::after {
						position: absolute;
						content: '';
						display: block;
						width: 0px;
						height: 0px;
						border: 7px solid transparent;
						border-top-color: black;
						top: 34%;
						right: 12%;
					}
				}
			}
		}

		.video-content {
			width: 100%;
			height: 350px;
			background-color: white;
			text-align: center;
			line-height: 200px;
			font-weight: bold;
		}
	}
</style>
